<style>
  select {
    background: #fff !important;
  }
  .gradualBg.u-high {
    background: #d5d5d5 !important;
  }
  .InfosBox .w-70 {
    width: 70%;
  }
  .InfostDiv span{
    font-size: 0.3rem;
    color: #323232;
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
    margin-left: 0.3rem;
  }
  .tonext{
    display: none;
  }
  .InfostDiv span:last-child{display:none;width:auto;position: absolute;top:0;right:0.6rem;font-size: 0.22rem;color:red;}
</style>
<div class="CommonHeader">
  <div class="CommonBackBtn">
    <a href="javascript:history.go(-1)"
      ><img src="__CDN__/map/images/return_black.png" alt="返回"
    /></a>
  </div>
  <div class="CommonTitle">{$proxy_name}</div>
</div>

<div class="CommonMain">
  <form
    action="{:url('user/proxy')}"
    enctype="multipart/form-data"
    method="post"
    name="form"
  >
    <div class="InfosBox">
      <div class="agentTitle">选择您想代理的区域</div>
      <div class="agentTitle">
        <span>代理费:</span><span id="price">{$personal_level}</span><i></i>
      </div>
      <div class="DrawingstDiv am-cf" {$regioneIs}>
        <span class="am-fl">大区</span>
        <select class="am-fl" name="regione" id="regione">
          {$regione}
        </select>
        <p class="img"><img src="__CDN__/map/images/arrow_right.png" /></p>
      </div>
      <input type="hidden" name="ajax" value="ajax" />
      <input type="hidden" name="price" value="{$personal_level}" />
      <div class="DrawingstDiv am-cf" {$province}>
        <span class="am-fl">省份</span>
        <select class="am-fl" name="province" id="addarea_sheng">
          {$option.prov}
        </select>
        <p class="img"><img src="__CDN__/map/images/arrow_right.png" /></p>
      </div>
      <div class="DrawingstDiv am-cf" {$city}>
        <span class="am-fl">城市</span>
        <select class="am-fl" name="city" id="addarea_shi"> </select>
        <p class="img"><img src="__CDN__/map/images/arrow_right.png" /></p>
      </div>
      <div class="DrawingstDiv am-cf" {$area}>
        <span class="am-fl">区域</span>
        <select class="am-fl" name="area" id="addarea_quxian"> </select>
        <p class="img"><img src="__CDN__/map/images/arrow_right.png" /></p>
      </div>

      <input type="hidden" name="number" value="{$number}" />    
    <div class="DmBtn Mt70">
      <input class="isnext gradualBg" type="button" value="下一步" />
    </div>
  </div>
    <!-- 下一步 -->
    <div class="tonext">
      <div class="InfostDiv am-cf">
        <span class="am-fl">联系人</span>
        <input
          class="am-fl w-70"
          type="text"
          name="fullname"
          value=""
          placeholder="请输入"
        />
      </div>
      <div class="InfostDiv am-cf">
        <span class="am-fl">手机</span>
        <input
          class="am-fl w-70"
          type="text"
          value=""
          name="phone"
          placeholder="请输入"
        />
        <span>手机号输入格式不正确，请重新输入</span>
      </div>
      <div class="InfostDiv am-cf">
        <span class="am-fl">银行名称</span>
        <input
          class="am-fl w-70"
          type="text"
          name="branch"
          value=""
          placeholder="请输入"
        />
      </div>
      <div class="InfostDiv am-cf">
        <span class="am-fl">银行卡号</span>
        <input
          class="am-fl w-70"
          type="number"
          name="account"
          value=""
          placeholder="请输入"
        />
      </div>
      <div class="DmBtn Mt70">
        <input class="gradualBg save" type="button" value="保存" />
      </div>
    </div>
  </form>
</div>
<script>
  var number = $("input[name='number']").val()
  $("#addarea_sheng").change(function() {
    var provid = $("#addarea_sheng").val()
    $.get("{:url('user/getRegion')}?pid=" + provid + "&ajax=1", function(data) {
      $("#addarea_shi").show(0, function() {
        $(this).html(data)
      })
    })
    var id = $(this)
      .find("option:selected")
      .val()
    console.info(id)
    if (number == 1) {
      ajax(id)
    }
  })

  $("#addarea_shi").change(function() {
    var provid = $("#addarea_shi").val()
    $.get("{:url('user/getRegion')}?pid=" + provid + "&ajax=1", function(data) {
      $("#addarea_quxian").show(0, function() {
        $(this).html(data)
      })
    })

    var id = $(this)
      .find("option:selected")
      .val()
    if (number == 2) {
      ajax(id)
    }
  })

  $("#addarea_quxian").change(function() {
    var id = $(this)
      .find("option:selected")
      .val()
    if (number == 3) {
      ajax(id)
    }
  })

  $("#regione").change(function() {
    var id = $(this)
      .find("option:selected")
      .val()
    if (number == 5) {
      ajax(id)
    }
  })

  function ajax(id) {
    $.get("{:url('user/AjaxSelectPrice')}?id=" + id, function(data) {
      if (data.code == 1) {
        $("#price").html(data.data)
        $("input[name='price']").val(data.data)
      }
    })
  }
</script>

<script type="text/javascript" src="__CDN__/assets/js/jquery.form.js"></script>
<script>

  $('.isnext').on('click',function(){
    if (price == 0.0) {
      alert("您申请的地区价格待定，提交之后由客服人员联系您！")
      return
    }
    $("form").ajaxSubmit(function(e) {
      if (e.code == 1) {
        // window.location.href="{:url('user/addagent')}";
        $('.InfosBox').hide();
        $('.tonext').show();
        $("input[name='ajax']").val('')
      } else {
        alert(e.msg)
      }
    })
     
  })
  
  $(".save").on("click", function() {
    var phone = $("input[name='phone']").val()
    var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
    if (!myreg.test(phone)) {
      alert("请填写正确的手机号码")
      return false
    }

    if (phone.length != 11) {
      alert("手机号码必须11位")
      return false
    }
    var price = $("input[name='price']").val()
    if (price == 0.0) {
      alert("您申请的地区价格待定，提交之后由客服人员联系您！")
      return
    }
    $("form").ajaxSubmit(function(e) {
      if (e.code == 1) {
        alert(e.msg)
        // window.location.href="{:url('user/addagent')}";
        javascript: history.go(-1)
      } else {
        alert(e.msg)
      }
    })
  })
  $("#regione").on("change", function() {
    $(".save").removeClass("u-high")
  })
</script>
